<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>资料录入</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="/static/wx/lib/sui/sm.min.css">
    <link rel="stylesheet" href="/static/wx/lib/sui/sm-extend.min.css">
    <link rel="stylesheet" href="/static/wx/css/reset.css">
    <link rel="stylesheet" href="/static/wx/css/main.css">
    <link rel="stylesheet" href="/static/wx/css/public_main.css">
    <link rel="stylesheet" href="/static/wx/css/select.css">
</head>

<body>
<div class="page-group">
    <div class="page page-current" id="filerecord">

        <!-- 主内容 -->
        <div class="content">
            <div class="setp-card">
                <div class="step-box">
                    <div class="step-item selected">
                        <div class="step-item-line">
                            <span></span>
                        </div>
                        <div class="step-item-text size-65">保单险种</div>
                    </div>
                    <div class="step-item">
                        <div class="step-item-line">
                            <span></span>
                        </div>
                        <div class="step-item-text size-65">货品信息</div>
                    </div>
                    <div class="step-item">
                        <div class="step-item-line">
                            <span></span>
                        </div>
                        <div class="step-item-text size-65">货品受损</div>
                    </div>
                    <div class="step-item">
                        <div class="step-item-line">
                            <span></span>
                        </div>
                        <div class="step-item-text size-65">货品现状</div>
                    </div>
                    <div class="step-item">
                        <div class="step-item-line">
                            <span></span>
                        </div>
                        <div class="step-item-text size-65">物权信息</div>
                    </div>
                    <div class="step-item">
                        <div class="step-item-line">
                            <span></span>
                        </div>
                        <div class="step-item-text size-65">递交授权</div>
                    </div>
                </div>
                <div class="size-65 text-c">
                    以下资料作为法律责任依据请如实填写，<span class="blue">查看模版>></span>
                </div>
            </div>
            <div class="bs-box">
                <div class="bs-box-content">
                    <div class="bs-box-inner">
                        <div class="bs-box-content-item">
                            <p class="size-m">保单号</p>
                            <div>
                                <input class="size-m" type="text" placeholder="请填写保单号" value="{$report_num| default = ''}" name="report_num" onkeyup="value=value.replace(/[\u4e00-\u9fa5]/ig,'')"/>
                            </div>
                        </div>
                        <div class="bs-box-content-item">
                            <p class="size-m">报案号</p>
                            <div>
                                <input class="size-m" type="text" placeholder="请填写报案号" onkeyup="value=value.replace(/[\u4e00-\u9fa5]/ig,'')" {if !empty($policy_num)} value="{$policy_num}" readonly="readonly" {/if} name="policy_num" />
                            </div>
                        </div>
                        <div class="bs-box-content-item width-link size-m border-b-none demo">
                            <div>出险险种</div>
                            <div>
                                <input placeholder="请选择险种" id='type_picker' name="type" value="{$insurance_str}" readonly="readonly"/>
                            </div>
                        </div>
                        <div class="fs-dropdown hidden" id="demo">
                            <div class="fs-options">
                                {volist name="list" id="vo"}
                                 <div class="fs-option {if !empty($insurance_name) && in_array($vo.it_id,$insurance_name)} selected{/if}" data-value="{$vo.it_id}" data-index="{$vo.it_id}">
                                    <span class="fs-checkbox"><i></i></span>
                                    <div class="fs-option-label">{$vo.it_name}</div>
                                </div>
                                {/volist}
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="btn-box" style="margin-top: 1rem;">
                <div class="my-btn">
                    <span class="active">下一步</span>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
<script type='text/javascript' src='/static/wx/lib/sui/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/static/wx/lib/sui/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/static/wx/lib/sui/sm-extend.min.js' charset='utf-8'></script>
<script>
    var myDiv = $("#demo");
    var a='';

    $(function () {
        $(document).on("click", function() { //对document绑定一个影藏Div方法
         // 显示所选内容
         var type_selected_text = []
         $(myDiv).find('.selected').each(function(){
                type_selected_text.push($(this).find('.fs-option-label').text())
            })
            $('#type_picker').val(type_selected_text.join(','))
            $(myDiv).hide() 
        });
        $(document).on('click','.demo',function(event) {
            event.stopPropagation(); //阻止事件向上冒泡
            if($("#demo").css('display') === 'block'){
                $("#demo").css({'display':'none'})
            }else{
                $("#demo").css({'display':'block'})
            }  
        });
        $('.fs-option').click(function(event){
            if(!$(this).hasClass('selected')){
                $(this).addClass('selected')
            }else{
                $(this).removeClass('selected')
            }
           event.stopPropagation()
        });

        var n = $('.step-box').children().length;
        $('.step-item').css('width', document.body.clientWidth / n + 'px')


        $(document).on('click', '.my-btn', function () {
            var poliecy = $("input[ name='policy_num']").val();
            var report_num = $("input[ name='report_num']").val();
            var type = $(myDiv).find('.selected');
           
            if (report_num.length == 0) {
                $.alert('请填写保单号');
                return;
            }
            if (poliecy.length == 0) {
                $.alert('请填写报案号');
                return;
            }
            if (type.length ==0) {
                $.alert('请选择出险险种');
                return;
            }
            var str = '';
            $("#demo  .selected").each(function(index){
                   var b=$(this).attr('data-value');
                       str+=b+',';
            })
            //console.log(str);return;
            $.ajax({
                type: 'POST',
                url: "{:url('insurer/addInsurer')}",
                data: {
                    'policy_num': poliecy,
                    'report_num': report_num,
                    'insurance_type': str.substring(0,str.length-1),
                    'now_status':1
                },
                dataType: 'json',
                success: function (Json) {
                    if (Json.code == 200) {
                       location.href="{:url('insurer/step2')}?policy_num="+Json.data.policy_num;
                    } else {
                        $.alert(Json.msg);
                    }
                }
            });
        });


        $(document).on('click', '.blue', function () {
            location.href="{:url('index/test1')}"
        })

    });


</script>
</body>

</html>